<template>
  <view class="login-container">
    <!-- 登录表单区域 -->
    <view class="login-form">
      <image class="logo" src="../../static/morentouxiang.png"></image>
      
      <form @submit="handleLogin">
        <!-- 手机号输入 -->
        <view class="form-item">
          <uni-icons type="phone" size="24" class="input-icon"></uni-icons>
          <input
            class="form-input"
            type="number"
            v-model="loginForm.phone"
            placeholder="请输入手机号"
            maxlength="11"
            required
          />
        </view>

        <!-- 密码输入 -->
        <view class="form-item">
          <uni-icons type="lock" size="24" class="input-icon"></uni-icons>
          <input
            class="form-input"
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
            required
          />
          <uni-icons
            :type="showPassword ? 'eye' : 'eye-slash'"
            size="24"
            class="toggle-icon"
            @click="showPassword = !showPassword"
          ></uni-icons>
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" form-type="submit">登录</button>
      </form>

      <!-- 其他操作 -->
      <view class="login-actions">
        <navigator url="/pages/login/forgot-password" class="action-link">忘记密码?</navigator>
        <navigator url="/pages/login/register" class="action-link">注册账号</navigator>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js';

export default {
  data() {
    return {
      loginForm: {
        phone: '',
        password: '',
      },
      showPassword: false
    };
  },
  methods: {
    // 处理登录
async handleLogin() {
  // 表单验证
  if (!this.validatePhone(this.loginForm.phone)) {
    return uni.showToast({
      title: '请输入有效的手机号',
      icon: 'none'
    });
  }

  if (this.loginForm.password.length < 6) {
    return uni.showToast({
      title: '密码长度不能少于6位',
      icon: 'none'
    });
  }

  try {
    // 打印请求信息以便调试
    console.log('登录请求数据:', {
      phone: this.loginForm.phone,
      password: '******'
    });
    
    // 使用API模块中的登录方法
    const res = await api.loginApi({
      phone: this.loginForm.phone,
      password: this.loginForm.password
    });

    // 打印响应信息以便调试
    console.log('登录响应:', res);
    
    if (res.code === 200) {
      // 登录成功，保存 token 和用户信息
      console.log('登录成功，保存的用户信息:', res.data.userInfo);
      uni.setStorageSync('token', res.data.token);
      uni.setStorageSync('userInfo', res.data.userInfo);

      uni.showToast({ title: '登录成功', icon: 'success' });

      // 直接跳转到我的页面，避免页面加载问题
      uni.reLaunch({ url: '/pages/myfile/myfile' });
    } else {
      uni.showToast({ title: res.message || '登录失败，请检查账号密码', icon: 'none' });
      console.error('登录失败:', res.message);
    }
  } catch (err) {
    console.error('登录请求失败:', err);
    
    // 检查错误类型并提供更具体的错误提示
    if (err.message === 'Network Error') {
      uni.showToast({ title: '网络错误，请检查网络连接', icon: 'none' });
      console.error('网络连接失败，请检查：\n1. 后端服务是否启动\n2. 网络连接是否正常\n3. API地址是否正确');
    } else if (err.message.includes('401')) {
      uni.showToast({ title: '未授权，请重新登录', icon: 'none' });
    } else if (err.message.includes('500')) {
      uni.showToast({ title: '服务器错误，请联系管理员', icon: 'none' });
      console.error('服务器错误，根据错误日志，可能的原因是：\n1. 数据库表中缺少必要的列（如created_at）\n2. 数据库连接配置错误\n3. Sequelize模型定义与数据库结构不匹配');
    } else {
      uni.showToast({ title: '登录失败：' + (err.message || '未知错误'), icon: 'none' });
    }
  }
},

    // 手机号验证
    validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/;
      return reg.test(phone);
    }
  }
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 30rpx 30rpx;
}

.login-form {
  width: 100%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 60rpx 30rpx;
  box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.1);
}

.logo {
  width: 160rpx;
  height: 160rpx;
  margin: 0 auto 60rpx;
  display: block;
}

.form-item {
  position: relative;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.form-input {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  padding-left: 60rpx;
  padding-right: 60rpx;
}

.input-icon {
  position: absolute;
  left: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.toggle-icon {
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  background-color: #1E88E5;
  color: #fff;
  border-radius: 45rpx;
  font-size: 34rpx;
  margin-top: 40rpx;
}

.login-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.action-link {
  color: #1E88E5;
  font-size: 28rpx;
  text-decoration: none;
}
</style>